import React, { Component } from 'react';
import { Select } from 'antd';
import { find, isEmpty, map, isFunction, omit } from 'lodash';
import { abortFetch, newAbortCtrl } from '@/helpers/request';
import { isObjectValEqual } from '/common/utils/utils';
import { ObjectBox } from '/common/componentsTpl/ObjectBox';
import { connect } from 'dva';

const { Option } = Select;

class ObjectListBox extends ObjectBox {
  // 返回一个对象来更新 state
  static getDerivedStateFromProps(nextProps) {
    // Should be a controlled component.
    if ('value' in nextProps) {
      // console.log('nextProps:',nextProps);
      // const { primaryKey, nameKey } = nextProps;
      const value = nextProps.value || [];
      // const v = {};
      // v[primaryKey] = value[primaryKey] || '';
      // v[nameKey] = value[nameKey] || '';
      return { value };
    }
    return null;
  }

  constructor(props) {
    super(props);
    const value = props.value || [];
    this.state = {
      loading: false,
      value,
    };
  }

  handleChange(value) {
    // console.log('value', value);
    const { primaryKey, global, appCode } = this.props;
    const compData = !isEmpty(this.props.compData) ? this.props.compData : global[appCode] || [];
    // const { compData = [], primaryKey, nameKey } = this.props;
    const data = [];
    map(value, (s) => {
      const obj = find(compData, (v) => {
        return v[primaryKey] == s;
      });
      if (!isEmpty(obj)) {
        data.push(obj);
      }
    });
    // console.log('data:', data);
    if (isEmpty(data)) {
      if (!('value' in this.props)) {
        this.setState({ value: [] });
      }
      this.triggerChange([]);
      return false;
    }

    if (!('value' in this.props)) {
      this.setState({ value: data });
    }
    this.triggerChange(data);
  }

  render() {
    if (!this.props.visible) return null;
    const { style, primaryKey, nativeProps = {}, global, appCode } = this.props;
    const compData = !isEmpty(this.props.compData) ? this.props.compData : global[appCode] || [];
    const styleO = style || nativeProps.style || {};
    // const { style, primaryKey, nameKey, nativeProps = {}, compData, renderItem, renderOptionText } = this.props;
    // const styleO = style || nativeProps.style || {};
    // map
    return (
      <Select showSearch
              allowClear
        // tokenSeparators={[',']}
              value={map(this.state.value, (v) => (
                `${v[primaryKey]}`
              ))}
              filterOption={this.handleFilter.bind(this)}
              onChange={this.handleChange.bind(this)}
              loading={this.state.loading}
              {...nativeProps}
              style={{ minWidth: '100px', ...styleO }}
              optionLabelProp={'text'}
              dropdownRender={this.dropdownRender.bind(this)}
      >
        <Option value="" text={'请选择'}>请选择</Option>
        {map(compData, (opt, oK) => {
          const props = this.getOptionProps(opt, oK);
          return (
            <Option {...omit(props, ['children'])}
                    value={`${opt[primaryKey]}`}
            >
              {props.children}
            </Option>
          );
        })}
      </Select>
    );
  }
}

export default connect(({ global }) => ({ global }))(ObjectListBox);
